<!--
 * @Descripttion: 
 * @version: 
 * @Author: hhy
 * @Date: 2021-04-20 11:33:29
 * @LastEditors: hhy
 * @LastEditTime: 2021-05-12 09:23:54
 * @FilePath: \votemp-user-pc\src\components\common-mp\qrcode-dialog.vue
-->

<template>
  <all-dialog
    v-model:visible="show"
    :title="title"
    width="380px"
    noline
    @close="onClose"
  >
    <div v-loading="!url" class="align">
      <img :src="url" width="250" alt="wx-QRcode" />
      <p class="mt10">{{ tip }}</p>
    </div>
  </all-dialog>
</template>

<script>
import { defineComponent, toRefs, reactive } from 'vue';
import AllDialog from './all-dialog.vue';
export default defineComponent({
  name: 'QrcodeDialog',
  components: {
    AllDialog,
  },
  props: {
    // 图片url
    url: {
      type: String,
      default: '@/assets/img/customized/wx-QRcode.png',
    },
    // 弹窗标题
    title: {
      type: String,
      default: '',
    },
    // 文字提示
    tip: {
      type: String,
      default: '微信扫一扫',
    },
  },
  emits: ['close'],
  setup(props, context) {
    const state = reactive({
      show: true,
    });
    const onClose = () => {
      context.emit('close');
    };
    return {
      ...toRefs(state),
      onClose,
    };
  },
});
</script>

<style lang="scss" scoped>
.align {
  height: 310px;
}
</style>
